import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs/blocks";

import { color } from "../components/shared/styles";

<Meta title="样式/Colors" />

# Colors

<ColorPalette>
  <ColorItem
    title="theme.color.primary"
    subtitle="Coral"
    colors={[color.primary]}
  />
  <ColorItem
    title="theme.color.secondary"
    subtitle="Blue"
    colors={[color.secondary]}
  />
  <ColorItem
    title="theme.color.tertiary"
    subtitle="Grey"
    colors={[color.tertiary]}
  />
  <ColorItem
    title="theme.color.positive"
    subtitle="Green"
    colors={[color.positive]}
  />
  <ColorItem
    title="theme.color.warning"
    subtitle="Ochre"
    colors={[color.warning]}
  />
  <ColorItem
    title="theme.color.negative"
    subtitle="Red"
    colors={[color.negative]}
  />
  <ColorItem
    title="theme.color.orange"
    subtitle="Orange"
    colors={[color.orange]}
  />
  <ColorItem title="theme.color.gold" subtitle="Gold" colors={[color.gold]} />
  <ColorItem
    title="theme.color.green"
    subtitle="Green"
    colors={[color.green]}
  />
  <ColorItem
    title="theme.color.seafoam"
    subtitle="Seafoam"
    colors={[color.seafoam]}
  />
  <ColorItem
    title="theme.color.purple"
    subtitle="Purple"
    colors={[color.purple]}
  />
  <ColorItem
    title="theme.color.ultraviolet"
    subtitle="Ultraviolet"
    colors={[color.ultraviolet]}
  />
  <ColorItem
    title="Monochrome"
    colors={[
      color.darkest,
      color.darker,
      color.dark,
      color.mediumdark,
      color.medium,
      color.mediumlight,
      color.light,
      color.lighter,
      color.lightest,
    ]}
  />
</ColorPalette>